<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <style type="text/css">
        .home {
            height: 100%;
        }
        #device-map {
             position: relative;
             width: 100%;
             overflow: hidden;
             height: 945px;
             display: block;
         }
    </style>
</head>
<body>
<div class="home">
    <div id="device-map"></div>
</div>
<script src="../../plugins/vue/vue.js"></script>
<script src="../../plugins/element-ui/index.js"></script>
<script src="../../plugins/axios/axios.min.js"></script>
<script type="text/javascript" src="../../plugins/map/l7.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#device-map',
        data() {
            return {
            };
        },
        methods: {
        },
        mounted() {
            console.log("mounted......");
            const scene = new L7.Scene({
                id: 'device-map',
                map: new L7.GaodeMap({
                    viewMode: '3D',
                    pitch: 0,
                    style: 'light',
                    center: [121.410765, 31.256735],
                    zoom: 14.83,
                })
            });
            fetch(
                'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
            )
                .then(res => res.json())
                .then(data => {
                    scene.addImage(
                        '00',
                        'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
                    );
                    scene.addImage(
                        '01',
                        'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg'
                    );
                    scene.addImage(
                        '02',
                        'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg'
                    );
                    const imageLayer = new L7.PointLayer()
                        .source(data, {
                            parser: {
                                type: 'json',
                                x: 'longitude',
                                y: 'latitude'
                            }
                        })
                        .shape('name', ['00', '01', '02'])
                        .size(15);
                    scene.addLayer(imageLayer);
                });
        },
        created(){
            let userInfo = localStorage.getItem("userInfo");
            if(userInfo == null){
                console.log("NO LOGIN");
                window.top.location.href = '/backend/page/login/login.html';
                return false;
            }
        }



    })
</script>
</body>
</html>